<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside width="200px" style="height: 100vh">
        <el-menu :default-active="currentRoute" class="menu" router>
          <el-menu-item v-for="item in routes" v-show="item.name !== 'Home'" :key="item.path" :index="item.path">
            <span>{{ item.name }} {{ item.meta?.title }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <router-view />
      </el-main>
    </el-container>
    <!-- 全局表单弹窗组件 -->
    <form-dialog />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import router from './router'
import FormDialog from '@zl-crud/components/form-dialog'

const route = useRoute()
const currentRoute = ref(route.path)

// 从路由配置中获取所有路由
const routes = router.options.routes

watch(
  () => route.path,
  (newPath) => {
    currentRoute.value = newPath
  },
)
</script>

<style>
html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}
.menu {
  height: 100%;
  overflow-x: hidden;
}

.el-main {
  background: #f5f7fa;
  padding: 0 10px !important;
}
</style>
